import React, {Component} from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';

/**
 * 第三方控件做的发现路由不行 更换为官方控件
 */
export default class ListItem extends Component {
  render() {
      var item = this.props.data
      if (item.show_type === 0) {
          return <TouchableOpacity onPress={() => {
              this.props.navigation.navigate('Details', {  name: this.props.name, url: item.url});}}>
              <View >
                  <Text numberOfLines={2} style={styles.item_text}>{item.title}</Text>
                  <View style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      padding: 10
                  }}>
                      <View style={{
                          flexDirection: 'row',
                          alignItems: 'center',
                      }}>
                          <Text style={{ color: '#939393', fontSize: 12, marginRight: 10 }}>{item.publish_time}</Text>
                          <Image resizeMode={'contain'} source={{ uri: 'icon_eye_gray' }} style={{ height: 15, width: 15, marginRight: 2 }} />
                          <Text style={{ color: '#939393', fontSize: 12 }}>{item.view_count}</Text>
                      </View>
                      <View style={{
                          flexDirection: 'row',
                          justifyContent: 'flex-end',
                          alignItems: 'center',
                      }}>
                          <Image resizeMode={'contain'} source={{ uri: 'icon_collection_no' }} style={{ height: 15, width: 15 }} />
                          <Text style={{ color: '#939393', fontSize: 12, marginLeft: 5 }}>收藏</Text>
                      </View>
                  </View>
              </View>
          </TouchableOpacity>
      }
      if (item.show_type === 1) {
          return <TouchableOpacity onPress={() => {
              this.props.navigation.navigate('Details', {  name: this.props.name, url: item.url});}}>
              <View style={{ flexDirection: 'row', paddingTop: 10, paddingBottom: 10 }}>
                  <View style={{ flex: 1, height: 80, marginLeft: 10, marginRight: 10 }} >
                      <Image style={{ flex: 1, height: 80 }} resizeMode='cover' source={{ uri: item.cover }} />
                      <View style={{
                          flexDirection: 'row',
                          justifyContent: 'flex-end',
                          backgroundColor: '#00000066',
                          alignItems: 'center',
                          marginTop: -20,
                          padding: 2
                      }}>
                          <Image resizeMode={'contain'} source={{ uri: 'icon_eye' }} style={{ height: 10, width: 20 }} />
                          <Text style={{ color: '#ffffff', fontSize: 12 }}>{item.view_count}</Text>
                      </View>
                  </View>
                  <View style={{ flex: 2, marginRight: 10 }}>
                      <Text numberOfLines={2} style={{ flex: 1, fontSize: 16, color: '#000000', }}>{item.title}</Text>
                      <View style={{
                          flexDirection: 'row',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                      }}>
                          <View>
                              <Text style={{ color: '#939393', fontSize: 12 }}>{item.publish_time}</Text>
                          </View>
                          <View style={{
                              flexDirection: 'row',
                              justifyContent: 'flex-end',
                              alignItems: 'center',
                          }}>
                              <Image resizeMode={'contain'} source={{ uri: 'icon_collection_no' }} style={{ height: 15, width: 15 }} />
                              <Text style={{ color: '#939393', fontSize: 12, marginLeft: 5 }}>收藏</Text>
                          </View>
                      </View>
                  </View>
              </View>
          </TouchableOpacity>
      }
      if (item.show_type === 2) {
          return <TouchableOpacity onPress={() => {
              this.props.navigation.navigate('Details', {  name: this.props.name, url: item.url});}}>
              <View style={{ flexDirection: 'row', paddingTop: 10, paddingBottom: 10 }}>
                  <View style={{ flex: 2, marginLeft: 10 }}>
                      <Text numberOfLines={2} style={{ flex: 1, fontSize: 16, color: '#000000', }}>{item.title}</Text>
                      <View style={{
                          flexDirection: 'row',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                      }}>
                          <View>
                              <Text style={{ color: '#939393', fontSize: 12 }}>{item.publish_time}</Text>
                          </View>
                          <View style={{
                              flexDirection: 'row',
                              justifyContent: 'flex-end',
                              alignItems: 'center',
                          }}>
                              <Image resizeMode={'contain'} source={{ uri: 'icon_collection_no' }} style={{ height: 15, width: 15 }} />
                              <Text style={{ color: '#939393', fontSize: 12, marginLeft: 5 }}>收藏</Text>
                          </View>
                      </View>
                  </View>
                  <View style={{ flex: 1, height: 80, marginLeft: 10, marginRight: 10 }} >
                      <Image style={{ flex: 1, height: 80 }} resizeMode='cover' source={{ uri: item.cover }} />
                      <View style={{
                          flexDirection: 'row',
                          justifyContent: 'flex-end',
                          backgroundColor: '#00000066',
                          alignItems: 'center',
                          marginTop: -20,
                          padding: 2
                      }}>
                          <Image resizeMode={'contain'} source={{ uri: 'icon_eye' }} style={{ height: 10, width: 20 }} />
                          <Text style={{ color: '#ffffff', fontSize: 12 }}>{item.view_count}</Text>
                      </View>
                  </View>
              </View>
          </TouchableOpacity>
      }
      if (item.show_type === 3) {
          return <TouchableOpacity onPress={() => {
              this.props.navigation.navigate('Details', { name: this.props.name, url: item.url});}}>
              <View >
                  <Text numberOfLines={2} style={styles.item_text}>{item.title}</Text>
                  <View style={styles.transverse}>
                      <Image style={{ flex: 1, height: 80 }} resizeMode='cover' source={{ uri: item.cover_list[0] }} />
                      <Image style={{ flex: 1, height: 80, marginLeft: 5 }} resizeMode='cover' source={{ uri: item.cover_list[1] }} />
                      <View style={{ flex: 1, height: 80, marginLeft: 5 }} >
                          <Image style={{ flex: 1, height: 80 }} resizeMode='cover' source={{ uri: item.cover_list[2] }} />
                          <View style={{
                              flexDirection: 'row',
                              justifyContent: 'flex-end',
                              backgroundColor: '#00000066',
                              alignItems: 'center',
                              marginTop: -20,
                              padding: 2
                          }}>
                              <Image resizeMode={'contain'} source={{ uri: 'icon_eye' }} style={{ height: 10, width: 20 }} />
                              <Text style={{ color: '#ffffff', fontSize: 12 }}>{item.view_count}</Text>
                          </View>
                      </View>
                  </View>
                  <View style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      padding: 10
                  }}>
                      <View>
                          <Text style={{ color: '#939393', fontSize: 12 }}>{item.publish_time}</Text>
                      </View>
                      <View style={{
                          flexDirection: 'row',
                          justifyContent: 'flex-end',
                          alignItems: 'center',
                      }}>
                          <Image resizeMode={'contain'} source={{ uri: 'icon_collection_no' }} style={{ height: 15, width: 15 }} />
                          <Text style={{ color: '#939393', fontSize: 12, marginLeft: 5 }}>收藏</Text>
                      </View>
                  </View>
              </View>
          </TouchableOpacity>
      }
      if (item.show_type === 4) {
          return <Text>098</Text>
      }
  }
}
const styles = StyleSheet.create({
    item_text: {
        flex: 1,
        fontSize: 16,
        color: '#000000',
        padding: 10,
        marginTop: 5
    },
    transverse: {
        flexDirection: 'row',
        paddingLeft: 10,
        paddingRight: 10
    },
    image_style: {
        flex: 1,
        height: 100,
        marginLeft: 10
    },
    instructions: {
        textAlign: 'center',
        color: '#FF0000',
        marginBottom: 5,
    },
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});

